<template>
  <div class="login">
    <van-nav-bar title="登录" left-arrow @click-left='goback()' class="header"></van-nav-bar>
    <van-form>
      <van-field v-model="username" name="用户名" placeholder="手机号/账户号/邮箱"
        :rules="[{ required: true}]" />

      <van-field v-model="password" :type="type" name="密码" placeholder="请输入密码"
        :rules="[{ required: true }]" />
      <!-- 隐藏按钮 -->
      <van-icon :name="msg" @click="hidden" />

      <div style="margin: 16px;">
        <van-button round block type="info" @click="login(username,password)">登录</van-button>
      </div>
      <a href="http://localhost:8081/#/quickReg">手机快速注册</a>
    </van-form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      msg: 'closed-eye',
      type: 'password'
    };
  },
  methods: {
  
    hidden() {
      if (this.msg == 'closed-eye') {
        this.msg = 'browsing-history-o'
        this.type = 'text'
      } else {
        this.msg = 'closed-eye'
        this.type = 'password'
      }
    },
    login(username,password) {
      console.log("username",username);
      console.log("password",password);
      this.$service({
        method: 'post',
        url: 'user/login',
        data:{
          loginname:username,
          password:password
        }
      })
        .then(res => {
          console.log(res.data.code);

          if (res.data.code == 200) {
            sessionStorage.setItem('username',this.username)
            localStorage.setItem('token',res.data.data.token)
            localStorage.setItem('userid',res.data.data.userid)
            this.$toast('登陆成功')
            if (this.$route.query.path) {
              this.$router.push(this.$route.query.path)
            } else {
              this.$router.push('/main')
            }
          }
        })
    },
    goback() {
      this.$router.back()
    },
  }
}
</script>

<style scoped>
.login {
  padding: 0 .625rem;
}

.van-nav-bar {
  margin-bottom: 1.25rem;
}

.login .van-form .van-field {
  display: inline-block;
  height: 2.75rem;
  margin-bottom: .625rem;
}

#app>div>form>div:nth-child(3)>button {
  border: 0;
  background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
  ;
}

.van-form {
  position: relative;
}

.van-form a {
  color: blue;
  font-size: .75rem;
  position: absolute;
  right: 1.25rem;
}

#app>div>form>div:nth-child(2)>div>div>input {
  position: relative;
}

#app>div>form>i {
  position: absolute;
  top: 4.5rem;
  right: 20px;
}
</style>